import styled from "./style.module.css";
import { useParams } from "react-router";
import { useEffect, useState } from "react";
type MemberDetail = {
    nickname?: string;
    phone?: string;
    gender?: string;
    birthday?: string;
    card?: string;
    growth?: string;
    recommender?: string;
    register?: string;
    address?: string;
    consumTimes?: string;
    consumMoney?: string;
    url?: string;
    // add other fields as needed
};

const MemberDetails = () => {
    const { id } = useParams();
    const [detail, setDetail] = useState<MemberDetail | null>(null);
    const token = localStorage.getItem('token') || '';
    useEffect(() => {
        fetch(`http://180.76.236.114:3006/me-api/members-detail?id=${id}`, {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`,
            },
        })
            .then(res => res.json())
            .then(res => setDetail(res.data));
    }, [id, token]);
    return (
        <div>
            
            <div className={styled.context}>
                <div className={styled.box2}>
                    <span>基本信息</span>
                </div>
                <div>
                    <p className={styled.p}><span>昵称</span><span>{detail?.nickname}</span></p>
                    <p className={styled.p}><span>手机号</span><span>{detail?.phone}</span></p>
                    <p className={styled.p}><span>性别</span><span>{detail?.gender}</span></p>
                    <p className={styled.p}><span>生日</span><span>{detail?.birthday}</span></p>
                    <p className={styled.p}><span>卡号</span><span>{detail?.card}</span></p>
                    <p className={styled.p}><span>成长值</span><span>{detail?.growth}</span></p>
                    <p className={styled.p}><span>推荐人手机号</span><span>{detail?.recommender}</span></p>
                    <p className={styled.p}><span>注册时间</span><span>{detail?.register}</span></p>
                    <p className={styled.p}><span>注册来源</span><span>微信小程序</span></p>
                    <p className={styled.p}><span>微信状态</span><span>在粉</span></p>
                    <p className={styled.p}><span>地址管理</span><span>{detail?.address}</span></p>
                    <p className={styled.p}><span>备注</span><span>无</span></p>
                </div>
                <div className={styled.box2}>
                    <span>会员资产</span>
                </div>
                <div>
                    <p className={styled.p}><span>初期消费金额</span><span>{detail?.nickname}</span></p>
                    <p className={styled.p}><span>初期消费次数</span><span>{detail?.nickname}</span></p>
                    <p className={styled.p}><span>优惠券</span><span>3</span></p>
                    <p className={styled.p}><span>累计消费金额</span><span>{detail?.consumMoney}</span></p>
                    <p className={styled.p}><span>累计消费次数</span><span>{detail?.consumTimes}</span></p>
                </div>
            </div>
        </div>
    );
}
export default MemberDetails;